<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 600px;
            top: 300px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
<script>
    // var x = a + Math.cos(deg * Math.PI / 180) * r;
    // var y = b + Math.sin(deg * Math.PI / 180) * r;
    //x,y:盒子的位置
    //a,b:圆心的位置 - 已知
    //r:半径 - 已知
    //deg:角度 - 已知

    const box = document.querySelector('.box');
    let timer = null;
    let a = 600;
    let b = 300;
    let r = 100;
    let deg = 0;
    box.onclick = function() {
        clearInterval(timer);
        timer = setInterval(() => {
            deg++;
            if (deg >= 360) { //停止定时器
                clearInterval(timer);
            }
            box.style.left = a + Math.cos(deg * Math.PI / 180) * r + 'px';
            box.style.top = b + Math.sin(deg * Math.PI / 180) * r + 'px';

            //绘制圆的轨迹，不断将运动的位置给创建出来的盒子使用。
            let cDiv = document.createElement('div');
            cDiv.style.cssText = `width:5px;height:5px;background:blue;position:absolute;left:${box.offsetLeft}px;top:${box.offsetTop}px;`;
            document.body.appendChild(cDiv);

        }, 1000 / 60)
    }


    // document.onmousemove = function(ev) {
    //     var ev = ev || event;
    //     let cDiv = document.createElement('div');
    //     cDiv.style.cssText = `width:50px;height:50px;background:blue;position:absolute;left:${ev.clientX}px;top:${ev.clientY}px;`;
    //     document.body.appendChild(cDiv);
    // }
</script>